<!--  -->
<template>
  <div class="">
    <div class="shopCatScroll">
      <div class="shop-header">
        <div class="left">
          <van-icon
            name="arrow-left"
            size="25"
            color="#c2c0c0"
            @click="$router.go(-1)"
          />
        </div>
        <div class="content">
          <h1>购物车</h1>
        </div>
        <div class="right">
          <van-icon name="chat-o" size="25" color="#c2c0c0" />
        </div>
      </div>
      <div class="imgCart" v-show="show">
        <img src="@/assets/cart.png" alt="" />
        <p class="cart-text">你的购物车空空如也</p>
        <div class="cart-btn">
          <van-button
            type="default"
            color="#ff5777"
            block
            size="small"
            @click="goToshop()"
            >去逛逛</van-button
          >
        </div>
      </div>
      <van-swipe-cell v-for="(item, index, key) in shoppingContent" :key="key">
        <template #left>
          <van-button square type="primary" text="选择" class="delete-button" />
        </template>
        <van-card
          num="1"
          price="2.00"
          :desc="item.color"
          :title="item.title"
          class="goods-card"
          :thumb="item.Image"
          ref="handle"
        >
        </van-card>
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            @click="spremove(index)"
          />
        </template>
      </van-swipe-cell>
    </div>
    <!-- <img :src="clickImga" alt=""> -->
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      show: true,
      shoppingContent: {},
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    goToshop() {
      this.$router.push("/home/shop");
    },
    spremove(index) {
      console.log(index);
      let spId = JSON.parse(localStorage.getItem("spxx"));
      spId.splice(index, 1);
      localStorage.setItem("spxx", JSON.stringify(spId));
      this.shoppingContent = JSON.parse(localStorage.getItem("spxx"));
      if (this.shoppingContent.length == 0) {
        this.show = true;
      } else {
        this.show = false;
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.shoppingContent = JSON.parse(localStorage.getItem("spxx"));
    if (this.shoppingContent.length > 0) {
      this.show = false;
    } else {
      this.show = true;
    }

    if (location.href.indexOf("#reloaded") == -1) {
      location.href = location.href + "#reloaded";
      location.reload();
    }
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.shopCatScroll {
  height: 90vh;
  overflow-y: scroll;
  .imgCart {
    display: flex;
    justify-content: center;
    position: relative;
    img {
      width: 100%;
    }
    .cart-text {
      position: absolute;
      font-size: 13px;
      top: 225px;
    }
    .cart-btn {
      font-weight: bold;
      width: 100px;
      bottom: 7px;
      position: absolute;
      border-radius: 8px;
    }
  }
  .shop-header {
    display: flex;
    border: 1px solid #c2c0c0;
    .left {
      padding: 5px;
      margin-left: 5px;
    }

    .content {
      flex: 8;
      font-size: 0.4rem;
      color: #737373;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .right {
      padding: 5px;
      margin-right: 5px;
    }
  }
}
</style>
<style>
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
</style>